<template>
  <view class="pg-outer">
    <uni-navbar
      :title="title"
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="60"
      :leftWidth="60"
      titleStyle="color:#fff;fontSize:18px;"
      :bgColor="isWhiteAppBar ? '#FF5500' : 'transparent'"
      :placeholder="false"
      :autoBack="true"
      @clickRight="backEv"
    >
      <view slot="left">
        <image
          v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao"
          src="../../static/images/back_white2.png"
          class="back-icon"
          style="margin-left: -10rpx"
        ></image>
      </view>
    </uni-navbar>

    <scroll-view
      class="pg-scroll"
      :scroll-y="true"
      :refresher-enabled="false"
      :style="{ paddingTop: headHt }"
      refresher-background="#ffffff"
    >
      <view class="fg-white" style="padding: 32rpx 0 10rpx 32rpx; margin-top: 0rpx">
        <view style="display: flex; align-items: center" @tap="toCoinDetail">
          <image :src="staticHost + '/coin.png'" style="height: 40rpx; width: 40rpx; margin-right: 12rpx"></image>
          <text class="text-style">金币余额</text>
          <image
            :src="staticHost + '/arrow_r_grey.png'"
            style="height: 24rpx; width: 24rpx; margin-left: 12rpx"
          ></image>
        </view>
        <view class="box-1">
          <text class="text-1">{{ golds }}</text>
          <text class="text-2">金币</text>
          <view class="box-2">
            <text class="text-3">{{ amount / 100 }}</text>
            <text class="text-4">元</text>
          </view>
        </view>
      </view>
      <view class="fg-white box-3">
        <image class="img-alipay" :src="staticHost + '/wf_zfb.png'"></image>
        <view class="box-4">
          <view class="text-style">支付宝</view>
          <view class="text-5" v-if="!accoutNo">请绑定支付宝</view>
          <view class="text-5">{{ accoutNo }}</view>
        </view>
        <view v-if="accountStatus != 1" class="btn-bind" @tap="bindAlipay">{{ bindName }}</view>
      </view>
      <view class="fg-white">
        <view class="text-style text-6">提现金额</view>
        <view class="box-5">
          <view
            class="box-item-ly"
            v-for="(item, index) in drawMoneyList"
            :key="item.id"
            @tap="moneyItemOnclick(index, item)"
          >
            <view v-if="item.txFlag" class="receive-box">已提</view>
            <!-- <view class="box-lock" v-if="item.locked == 1">
                            <image class="img-lock" :src="staticHost + '/wf_lock.png'" ></image>
                            <text class="text" >待解锁</text>
                        </view> -->
            <view class="box-lock" v-if="golds >= item.golds">
              <text class="text">{{ computeItemState(item) }}</text>
            </view>

            <view :class="['box-item', moneyPosition == index ? 'active' : '']">
              <view class="box-money">
                <text class="money">{{ item.amount / 100 }}</text>
                <text class="unit">元</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="text-style pg-space" style="margin-top: 40rpx; margin-bottom: 16rpx">金币提现规则说明：</view>
      <view v-for="item in drawTipArray" :key="item" class="pg-space text-tip">{{ item }}</view>
      <view style="height: 100rpx"></view>
    </scroll-view>
    <view class="pg-bottom">
      <view class="btn" @tap="sureClick">立即提现</view>
    </view>
    <WfCommonPop v-if="isTip" v-model="isTip" :config="tipConfig" @hideEv="okEv"></WfCommonPop>
  </view>
</template>
    <script>
import { staticHost } from '@/setting';
import { isMpAlipay, isMpBaidu, isMpToutiao } from '@/utils/platform';
import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo';
import { queryMoneyDetail, applyTx, SignNew } from '@/pages/welfare/api/index';
import WfCommonPop from '@/pages/welfare/components/WfCommonPop';

export default {
  mixins: [statusBarInfo],
  data() {
    return {
      staticHost,
      title: '提现',
      isWhiteAppBar: false,
      isMpAlipay,
      isMpBaidu,
      isMpToutiao,
      drawTipArray: [],
      golds: 0,
      amount: 0,
      accoutName: '',
      accoutNo: '',
      txTimes: 0,
      //是否已认证 已认证不可以修改 -1未绑定 0已输入 1已认证
      accountStatus: -1,
      bindName: '',
      drawMoneyList: [],
      moneyPosition: -1,
      //提现金额ID
      configId: -1,
      isTip: false,
      tipConfig: {
        title: '提现解锁',
        content: '您需要提现一次上一等级的金额后，才能解锁此金额。',
        isConfirm: false,
        cancelBtnTxt: '取消',
        btnTxt: '好的，我知道了！',
      },
    };
  },
  components: {
    WfCommonPop,
  },
  onShow() {
    this.getMoneyDetail();
  },
  methods: {
    computeItemState(item) {
      if (this.golds >= item.golds) {
        if (this.txTimes) {
          return '明日还可提';
        } else {
          return '今日可提现';
        }
      }
      return '';
    },
    bindAlipay() {
      console.log('bindAlipay===' + this.accountStatus);
      if (this.accountStatus != 1) {
        let url = '/pages/welfare/bindAlipay?accoutName=' + this.accoutName + '&accoutNo=' + this.accoutNo;
        this.$navigateTo(url);
      }
    },
    getMoneyDetail() {
      queryMoneyDetail().then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let rule = data.rule;
          let txTimes = data.txTimes || 0;
          this.drawTipArray = [];
          if (rule) {
            if (rule.indexOf('\n') != -1) {
              let tipList = rule.split('\n');
              this.drawTipArray.push(...tipList);
            } else {
              this.drawTipArray.push(rule);
            }
          }
          let userPayAccount = data.userPayAccoutDto;
          if (userPayAccount) {
            this.setData({
              accoutName: userPayAccount.accoutName,
              accoutNo: userPayAccount.accoutNo,
              accountStatus: userPayAccount.status,
            });
          }
          let bindName = '绑定';
          if (this.accountStatus == 0) {
            bindName = '重新绑定';
          }
          this.setData({
            txTimes,
            drawTipArray: this.drawTipArray,
            drawMoneyList: data.signGrouptxconfigs,
            golds: data.golds,
            amount: data.amount,
            bindName: bindName,
          });
        }
      });
    },
    moneyItemOnclick(index, item) {
      // if(item.locked == 1){
      //    let conifg ={
      //       title:'提现解锁',
      //      content: "您需要提现一次上一等级的金额后，才能解锁此金额。",
      //      isConfirm: false,
      //      cancelBtnTxt: "取消",
      //      btnTxt: "好的，我知道了！"
      //  }
      //  this.setData({
      //     isTip:true,
      //       tipConfig: conifg,
      //  })
      //   return
      // }
      this.setData({
        moneyPosition: index,
        configId: item.id,
      });
    },
    okEv() {
      console.log('zzeee', this.tipConfig);
      if (this.tipConfig && this.tipConfig.btnTxt == '领取更多金币红包') {
        this.isTip = false;
        // 签到并跳转
        SignNew({}).then((res) => {
          if (res.code == 200) {
            if (res.cg) {
              this.$navigateBack();
            } else if (res.data.id) {
              this.$navigateTo('/pages/welfare/signCenter?signId=' + res.data.id);
            }
          }
        });
      }
    },
    sureClick() {
      if (!this.accoutName || !this.accoutNo) {
        this.$showToast('请先绑定支付宝账号');
        return;
      }
      if (this.configId <= 0) {
        this.$showToast('请选择提现金额');
        return;
      }
      let parms = {
        configId: this.configId,
      };
      applyTx(parms).then((res) => {
        if (res.code == 200 && res.data) {
          let { waited, success, error } = res.data;

          let conifg;
          if (success) {
            if (waited) {
              conifg = {
                title: '温馨提示',
                content: '您的提现申请已提交，审核通过后将于1个工作日内到账。',
                isConfirm: false,
                btnTxt: '好的，我知道了！',
              };
            } else {
              conifg = {
                title: '温馨提示',
                content: '您已提现成功，提现金额已自动到账支付宝，明日最少还可提现0.3元。',
                isConfirm: false,
                btnTxt: '领取更多金币红包',
              };
            }
          } else if (error) {
            conifg = {
              title: '温馨提示',
              content: error,
              isConfirm: false,
              btnTxt: '好的，我知道了！',
            };
          }

          if (conifg) {
            this.setData({
              isTip: true,
              tipConfig: conifg,
            });
          }

          this.getMoneyDetail();
        }
      });
    },
    toCoinDetail() {
      this.$navigateTo('/pages/welfare/coinDetails');
    },
  },
};
</script>
    <style lang="scss" scoped>
.pg-outer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f50, rgba(255, 68, 0, 0));
}
.pg-scroll {
  flex: 1;
  overflow: hidden;
  width: 100%;
}
.text-style {
  font-weight: bold;
  color: #1a1b1e;
  font-size: 32rpx;
}
.text-tip {
  color: #7b828e;
  font-size: 28rpx;
}
.pg-space {
  margin: 0 48rpx;
}
.fg-white {
  margin: 32rpx 32rpx 0 32rpx;
  background-color: #fff;
  border-radius: 32rpx;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(77, 14, 0, 0.2);
}
.box-1 {
  display: flex;
  align-items: flex-end;
  margin-top: 10rpx;
}
.text-1 {
  color: #f65352;
  font-size: 80rpx;
}
.text-2 {
  color: #1a1b1e;
  font-size: 24rpx;
  font-weight: bold;
  margin: 0 24rpx 24rpx 12rpx;
}
.box-2 {
  display: flex;
  align-items: flex-end;
  background: rgba(246, 83, 82, 0.16);
  padding: 0rpx 16rpx;
  border-radius: 28rpx 28rpx 28rpx 0rpx;
  margin-bottom: 24rpx;
}
.text-3 {
  color: #f65352;
  font-size: 40rpx;
  font-weight: bold;
}
.text-4 {
  color: #f65352;
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.text-5 {
  color: #7b828e;
  font-size: 24rpx;
  margin-top: 12rpx;
}
.text-6 {
  padding: 32rpx 0 10rpx 32rpx;
}
.box-3 {
  padding: 0 32rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
}
.img-alipay {
  height: 96rpx;
  width: 96rpx;
}
.box-4 {
  margin-left: 16rpx;
  flex: 1;
}
.btn-bind {
  height: 64rpx;
  width: 144rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
  background-color: #f65352;
}
.box-5 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10rpx 32rpx 32rpx;
}
.box-item-ly {
  height: 160rpx;
  width: calc(33.33% - 22rpx);
  margin: 22rpx 22rpx 0 0;
  position: relative;
  .box-item {
    height: 100%;
    width: 100%;
    background-color: #f8eded;
    border: 2rpx solid #fff;
    border-radius: 24rpx;
    position: relative;
    &.active {
      border: 2rpx solid #ff7733;
    }
    .box-money {
      display: flex;
      align-items: flex-end;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 64rpx;
      .money {
        color: #f65352;
        font-size: 48rpx;
      }
      .unit {
        color: #f65352;
        font-size: 28rpx;
        margin-bottom: 10rpx;
        font-weight: bold;
      }
    }
  }
  .receive-box {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 40rpx;
    padding: 0 8px;
    background: #f65352;
    color: #fff;
    border-radius: 20rpx;
    z-index: 3;
    font-size: 20rpx;
    display: flex;
    align-items: center;
  }
  .box-lock {
    height: 36rpx;
    width: 136rpx;
    background: rgba(246, 83, 82, 0.16);
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 142rpx;
    z-index: 99;
    .img-lock {
      height: 24rpx;
      width: 20rpx;
    }
    .text {
      color: #f65352;
      font-size: 24rpx;
      margin-left: 6rpx;
    }
  }
}
</style>